<template>
    <span>
        <template v-if="action == 'edit' ">
            <!--{{selectValue}}{{longitude}}{{latitude}}-->
            <!--{{fieldKey}} {{myValue}} {{data[prefix+lonKey]}} {{data[prefix+latKey]}}-->
            <el-row>
                <el-col :span="24" >
                    <!--<el-input v-model="selectValue" :readonly="!isShowMap?true:false"></el-input>-->
                    <el-input v-model="selectValue" readonly @focus="isShowMap = true"></el-input>
                </el-col>
            </el-row>
            <div  v-if="isShowMap" class="map-choose-box-parent">
                <div class="map-choose-box">
                <div style="color: red;line-height: 20px;">只有确定修改后，定位才会变更</div>
                <el-row>
                    <el-col :span="24"><span>定位地址：</span></el-col>
                    <el-col :span="16">
                        <lar-field-input v-model="myValue"></lar-field-input>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="copyValue" style="margin-left: 16px">确定</el-button>
                        <el-button @click="isShowMap=false" style="margin-left: 6px">取消</el-button>
                    </el-col>
                </el-row>
                <map-select-address
                        v-on="$listeners"
                        :isinitmap="isinitmap"
                        :poiPicker="poiPicker"
                        :mapHeight="'500px'"
                        :inputId="inputId"
                        :mapId="mapId"
                        :lng="lng"
                        :lat="lat"
                        :scale="'12'"
                        style="position: relative;margin-top: 10px"
                        @positionPickerOk="mapOk">
                </map-select-address>
            </div>
            </div>

        </template>
        <template v-if="action == 'table'">
            <!--{{value}}<i icon="el-icon-edit"></i>-->
            {{value}}
        </template>
    </span>
</template>
<script>
    import MapSelectAddress from '../map/map-init.vue'
    import base from './base.js';

    export default {
        extends: base,
        components: {
            MapSelectAddress
        },
        props: {},
        data() {
            return {
                poiPicker: true,
                isinitmap: true,
                lng: '',  // 传进去的经度
                lat: '', // 传进去的纬度
                longitude: '',  // 传出来的经度
                latitude: '', // 传出来的纬度
                lonKey:'lon',
                latKey:'lat',
                prefixOne:'pick_',
                prefixTwo:'delivery_',
                searchModel: 'like',
                isShowMap: false,
                mapId: 'mapId' + Math.floor(Math.random() * 1000000000000000),
                inputId: 'inputId' + Math.floor(Math.random() * 1000000000000000),
                selectValue: ''
            }
        },
        computed: {
            polygonObj() {
                if (!this.myValue) {
                    return []
                } else {
                    return []
                }
            }
        },
        watch: {
            isShowMap: function (val) {
                if (val) {
                    if (this.fieldKey == 'pick_address') {
                        this.lng = this.data[this.prefixOne + this.lonKey];
                        this.lat = this.data[this.prefixOne + this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                    } else if (this.fieldKey == 'delivery_address') {
                        this.lng = this.data[this.prefixTwo + this.lonKey];
                        this.lat = this.data[this.prefixTwo + this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                    } else if (this.fieldKey == 'address') {
                        this.lng = this.data[this.lonKey];
                        this.lat = this.data[this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                    }
                }

            }
        },
        mounted() {
            setTimeout(() => {
                this.selectValue = this.myValue;
                if (this.fieldKey == 'pick_address') {
                    this.lng = this.data[this.prefixOne + this.lonKey];
                    this.lat = this.data[this.prefixOne + this.latKey];
                    this.longitude = this.lng;
                    this.latitude = this.lat;
                } else if (this.fieldKey == 'delivery_address') {
                    this.lng = this.data[this.prefixTwo + this.lonKey];
                    this.lat = this.data[this.prefixTwo + this.latKey];
                    this.longitude = this.lng;
                    this.latitude = this.lat;
                } else if (this.fieldKey == 'address') {
                    this.lng = this.data[this.lonKey];
                    this.lat = this.data[this.latKey];
                    this.longitude = this.lng;
                    this.latitude = this.lat;
                }
            }, 1500)
        },
        methods: {
            copyValue() {
                this.selectValue = this.myValue;
                this.longitude = this.lonlat[0];
                this.latitude = this.lonlat[1];
                this.isShowMap = false;
                if (this.fieldKey == 'pick_address') {
                    this.myValue = this.selectValue;
                    this.data[this.prefixOne + this.lonKey] = this.longitude;
                    this.data[this.prefixOne + this.latKey] = this.latitude;
                } else if (this.fieldKey == 'delivery_address') {
                    this.myValue = this.selectValue;
                    this.data[this.prefixTwo + this.lonKey] = this.longitude;
                    this.data[this.prefixTwo + this.latKey] = this.latitude;
                } else if (this.fieldKey == 'address') {
                    this.myValue = this.selectValue;
                    this.data[this.lonKey] = this.longitude;
                    this.data[this.latKey] = this.latitude;
                }
            },
            mapOk(value) {
                // this.myValue = value.nearestJunction ? value.address + '(' + value.nearestJunction + ')' : value.address;
                this.myValue = value.address;
                this.lonlat = [value.position.lng,value.position.lat]

            }
        },
    }
</script>
<style lang="less">
     .select-map{
         cursor: pointer;
         padding-left: 10px;
     }
    .select-map:hover{
        color: #14630B;
    }
     .map-choose-box-parent {
         position: fixed;
         z-index: 1000;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         .map-choose-box {
             position: relative;
             top: 10%;
             left: 30%;
             z-index: 30000;
             background-color: #fff;
             width: 800px;
             /*height: 600px;*/
             box-shadow: 1px 1px 10px #666;
             border-radius: 8px;
             padding: 10px;
             margin-top: 4px;
         }
     }
</style>
